<template>
  <div>
    <el-card :body-style="{padding: '10px'}">
      <el-row slot="header" type="flex" align="middle" justify="space-between">
        <div>
          <span class="my-iconfont-text1">OLED</span>
        </div>
        <div>
          <span>响应延时：</span>
          <span :class="delayClass">{{ delayMS }}</span>
        </div>
        <status-indicator :status="indicatorClass" :pulse="true" />
      </el-row>
      <el-row type="flex" justify="center" align="middle">
        <el-col :span="12">
          <el-image
            style="width: 100%; height: 100%;"
            :src="oledUrl"
            fit="fill"
          />
        </el-col>
        <el-col :span="12" style="margin-left: 10px;">
          <el-input
            type="textarea"
            v-model="textContent"
            :maxlength="32"
            :rows="5"
            show-word-limit
            @input="eventTextContentChange"
          />
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="12">
          <el-row>

          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row type="flex" align="middle">
            <el-button type="danger" icon="el-icon-delete" @click="eventTextContentClear" class="my-button">清空</el-button>
            <el-button type="primary" icon="el-icon-s-promotion" class="my-button" @click="eventTextContentSent">发送</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import oledImage from 'assets/images/oled.jpeg'
import { inputChange, inputSubmit, inputClear } from "@/util/data/api-OledControl"

export default {
  name: "OledControl",
  data() {
    return {
      textContent: this.$store.state.oledControl.inputText,
      oledUrl: oledImage,
      indicatorClass: '',
      delayClass: '',
      delayMs: null
    }
  },
  computed: {
    delayMS() {
      return this.delayMs + ' ms'
    },
    heartBeat() {
      return this.$store.state.serverTime
    }
  },
  methods: {
    eventTextContentSent() {
      const that = this
      const lastTime = new Date().getTime()
      this.indicatorClass = 'intermediary'
      inputSubmit().then(res => {
        that.indicatorClass = 'positive'
        const { data } = res
        const time = data.time
        that.delayMs = Math.abs((time - lastTime).toFixed(2))
        that.$message({
          message: "内容已成功发送到OLED上",
          type: "success",
          duration: 3000
        })
      }).catch(error => {
        console.log(error.response)
        that.indicatorClass = 'negative'
      })
    },
    eventTextContentClear() {
      const that = this
      const lastTime = new Date().getTime()
      this.indicatorClass = 'intermediary'
      inputClear().then(res => {
        that.indicatorClass = 'positive'
        const { data } = res
        // const status = data.status
        const time = data.time
        that.delayMs = Math.abs((time - lastTime).toFixed(2))
      }).catch(error => {
        console.log(error.response)
        that.indicatorClass = 'negative'
      })
    },
    eventTextContentChange(val) {
      const that = this
      const lastTime = new Date().getTime()
      this.indicatorClass = 'intermediary'
      inputChange({input: val}).then(res => {
        that.indicatorClass = 'positive'
        const {data} = res
        const input = data.input
        const time = data.time
        that.delayMs = Math.abs((time - lastTime).toFixed(2))
        that.$store.state.oledControl.inputText = input
      }).catch(error => {
        console.log(error.response)
        that.$store.state.oledControl.inputText = this.textContent
        that.indicatorClass = 'negative'
      })
    }
  },
  watch: {
    delayMs(val) {
      if (val <= 150) {
        this.delayClass = 'my-iconfont-greet'
      } else if (val <= 300) {
        this.delayClass = 'my-iconfont-normal'
      } else {
        this.delayClass = 'my-iconfont-bad'
      }
    },
    heartBeat() {
      this.textContent = this.$store.state.oledControl.inputText
    }
  }
}
</script>

<style scoped>
.my-iconfont-text1 {
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
  color: orangered;
}

.my-iconfont-greet {
  color: #42b983;
}
.my-iconfont-normal {
  color: greenyellow;
}
.my-iconfont-bad {
  color: orangered;
}
.my-button {
  width: 49%;
}
</style>
